<template>
  <div class="wrapBox">
    <div class="haeder animation">
      <div class="titleBar">
        <div class="text">
          市场拓展统计
          <el-tooltip class="item" effect="dark" placement="right-start">
            <div slot="content">
              <div style="font-size: 14px; margin-top: 5px" v-for="text in tipsText">{{ text }}</div>
            </div>
            <i class="el-icon-warning-outline icon"></i>
          </el-tooltip>
        </div>
      </div>
      <!-- 概况 -->
      <el-row  :gutter="24" class="mb24">
        <el-col  :span="24">
          <el-tabs v-model="tabPaneDefaultActiveName" @tab-click="handleTabPaneClick">
            <el-tab-pane v-for="(item, index) in 3" :label="tabPane[index]" :name="tabPaneActiveName[index]" :key="index" class="item">
              <el-row  :gutter="24" class="mb24">
                <el-col  :span="4"  v-for="item in summary[index]" >
                  <el-col :span="24" style="text-align: left;margin-top: 20px;">
                    <span style="font-size: 14px;color: rgba(0,0,0,.5);font-weight: 500;">{{ item.label }}</span>
                  </el-col>
                  <el-col :span="24"  style="text-align: left;margin-top: 10px;">
                    <span style="font-size: 22px;color: black;font-weight: 600;">{{ baseInfo[`${item.prop}`] || 0 }}</span>
                    <span style="font-size: 13px;color: rgba(0,0,0,.5);font-weight: 500;margin-left: 5px;">{{ item.unit }}</span>
                  </el-col>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </div>
    <div class="content">
      <div class="itemBox animation">
        <div class="titleBar">
          <div class="text">市场拓展支出统计<el-tooltip class="item" effect="dark" placement="right-start">
              <div slot="content">
                <div style="font-size: 14px">拓展日期为本月/今年的拓展支出金额合计</div>
              </div>
              <i class="el-icon-warning-outline icon"></i>
            </el-tooltip></div>
          <div class="content">
            <el-form
              label-position="right"
              :inline="true"
              class="clearfix"
              ref="queryForm"
              size="small"
              :model="queryParams"
            >
              <el-form-item label="" style="margin-bottom: 0px">
                <el-radio-group v-model="queryParams.type[0]" @change="changeTime(0)">
                  <el-radio-button label="month">本月</el-radio-button>
                  <el-radio-button label="year">今年</el-radio-button>
                </el-radio-group></el-form-item
              >
              <el-form-item label="" style="margin-bottom: 0px">
                <el-date-picker
                  style="width: 260px"
                  v-model="queryParams.time[0]"
                  type="daterange"
                  @change="marketExpansionExpensesStatistics"
                  value-format="yyyy-MM-dd"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="echart" ref="echart1" v-loading="echart1Loading"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { marketExpansionOverview, marketExpansionExpenses } from '@/api/biz/index'
import { echartsNullData } from '@/utils/index'
import dayjs from 'dayjs'
export default {
  name: 'MarketSummaryChart',
  data() {
    return {
      tabPaneActiveIndex:0,
      tabPaneDefaultActiveName:'first',
      tabPaneActiveName:['first','second','third'],
      tabPane:['月度','年度','累计'],
      baseInfo: {},
      queryParams: {
        type: ['month', 'month'],
        time: [
          [dayjs().startOf('month').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')],
          [dayjs().startOf('month').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')],
        ],
      },
      tipsText: [
        '统计说明:',
        '本月新增拓展次数=本月新增的市场拓展次数',
        '今年新增拓展次数=今年新增的市场拓展次数',
        '累计拓展次数=历史至本月的市场拓展次数',
        '本月拓展支出=本月新增的市场拓展支出合计',
        '今年拓展支出=今年新增的市场拓展支出合计',
        '累计拓展支出=历史至当前月的市场拓展支出合计',
      ],

      summary: [
        [
          {
            label: '新增市场拓展',
            prop: 'monthAddMarketExpansion',
            unit: '次',
          },
          {
            label: '市场拓展支出',
            prop: 'monthExpenses',
            unit: '万元',
          },
        ],
        [


          {
            label: '新增市场拓展',
            prop: 'yearAddMarketExpansion',
            unit: '次',
          },
          {
            label: '市场拓展支出',
            prop: 'yearExpenses',
            unit: '万元',
          },
        ],
        [

          {
            label: '市场拓展',
            prop: 'accumulateAddMarketExpansion',
            unit: '次',
          },

          {
            label: '市场拓展支出',
            prop: 'accumulateExpenses',
            unit: '万元',
          },

        ],
      ],
      loading: true,
      color: ['#3692fd', '#f59063', '#49efcd', '#facf6a', '#fb627d', '#7cc934', '#b22c2a'],
      time: '',
      echart1Loading: false,
      progressLoading: false,
      salesLoading: false,
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    changeTime(index) {
      const { type, time } = this.queryParams
      if (type[index] === 'month') {
        time[index] = [dayjs().startOf('month').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]
      } else {
        time[index] = [dayjs().startOf('year').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]
      }
      this.queryParams.time = [...time]
      const fn = {
        0: this.marketExpansionExpensesStatistics,
      }
      fn[index] && fn[index]()
    },
    initData() {
      marketExpansionOverview()
        .then((res) => {
          this.baseInfo = res.data
          this.$nextTick(() => {
            this.loading = false
          })
        })
        .catch(() => {
          this.loading = false
        })
      this.marketExpansionExpensesStatistics()
    },
    marketExpansionExpensesStatistics() {
      const time = this.queryParams.time[0]
      const oldTime = new Date().getTime()
      const currentParams = {
        beginDate: time[0],
        endDate: time[1],
      }
      this.echart1Loading = true
      marketExpansionExpenses(currentParams)
        .then((result) => {
          const { data } = result
          const d = 350
          const currentTime = new Date().getTime()
          const changeTime = currentTime - oldTime > d ? 0 : d - (currentTime - oldTime)
          const t = setTimeout(() => {
            clearTimeout(t)
            this.pieRender(data, 'echart1')
            this.echart1Loading = false
          }, changeTime)
        })
        .catch(() => {
          this.echart1Loading = false
        })
    },
    pieRender(data, refName, title = '') {
      if (this.$refs[refName]) {
        echarts.dispose(this.$refs[refName])
      }
      const arr = []
      Object.keys(data).map((keys) => {
        arr.push({
          name: keys,
          value: data[keys],
        })
      })
      const chart = echarts.init(this.$refs[refName])
      if (arr.length === 0) {
        echartsNullData(this.$refs[refName], echarts, title, this)
        return
      }
      chart.setOption({
        title: {
          show: false,
          text: title,
          textStyle: {
            color: '#606266',
            fontSize: 14,
            fontWeight: 'normal',
          },
          top: 10,
          left: 10,
        },
        color: this.color,
        tooltip: {
          trigger: 'item',
          valueFormatter: (value) => `${value}万元`,
        },
        legend: {
          top: 'bottom',
          left: 'center',
          bottom: 10,
        },
        parallel: {
          top: 0,
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: true,
            data: arr, // [name:"",value:""]
            bottom: 40,
            label: {
              // d百分比
              formatter: '{b}{c}万元',
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      })
    },
    handleTabPaneClick(tab, event) {
      this.tabPaneDefaultActiveName=this.tabPaneActiveName[tab.index];
      this.tabPaneActiveIndex=tab.index;
    }
  },

}
</script>
<style lang="scss" scoped>
.wrapBox {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  > .content {
    margin-top: 18px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    .itemBox {
      width: 49.4%;
      margin-bottom: 15px;
      padding: 15px;
      box-sizing: border-box;
      > .echart {
        width: 100%;
        height: 360px;
      }
    }
  }
  > .haeder {
    padding: 15px 15px;
    box-sizing: border-box;
  }
}

.titleBar {
  display: flex;
  flex-direction: row;
  align-items: center;
  > .text {
    width: 30%;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    flex-direction: row;
    align-items: center;
    .icon {
      margin-left: 8px;
    }
    &::before {
      content: '';
      display: block;
      height: 18px;
      width: 5px;
      background: #3a95fc;
      margin-right: 8px;
    }
  }
  .content {
    margin-left: auto;
  }
}
.general {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 20px;
  flex-shrink: 0;
  padding: 0 20px;
  box-sizing: border-box;
  > .item {
    width: 33%;
    background: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    > div {
      flex-shrink: 0;
      width: 33%;
      margin-bottom: 24px;
      background: #fff;
      display: flex;
      flex-direction: column;
      align-items: left;
      box-sizing: border-box;
      > .label {
        width: 100%;
        text-align: left;
        font-size: 14px;
        font-weight: 500;
        color:rgba(0, 0, 0, 0.5)
      }
      .number {
        font-size: 22px;
        height: 28px;
        font-weight: 600;
        margin: auto 0;
        line-height: 1;
        display: flex;
        align-items: flex-end;
        justify-content: left;
        > span {
          line-height: 1;
        }
        > span:nth-child(2) {
          display: block;
          font-size: 13px;
          font-weight: 500;
          margin-bottom: 2px;
          margin-left: 4px;
          color: #635f5f;
        }
      }
    }
  }
}

.animation {
  transition-duration: 0.2s;

  &:hover {
    transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    background: #fff;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  }
  border-radius: 4px;
  border: 1px solid #ebeef5;
  background-color: #fff;
}
</style>
